<!-- 见证任务主页 -->
<template>
  <div class="k-header-box witness-body">
    <breadcrumb
      :bread-path-list="breadPathList"
      last-bread-title="查看附件"
      :show-back-btn-flag="true"
      @handleBack="handleBack"
    />
    <div class="box_one">
      <div class="biaoTi">
        当前任务：
        <span>{{ $route.query.projectName }}</span>
        -
        <span>{{ $route.query.bidSectionName }}</span>
      </div>
    </div>
    <div class="witness-main">
      <!-- 见证人员 -->
      <div v-if="!managerFlag" class="box">
        <div class="box_tow">
          <!-- <el-tabs v-model="topTaskActive" @tab-click="stepsClickFn">
            <el-tab-pane
              v-for="(item, index) in attachmentList"
              :key="index"
              :label="
                item.witnessLinkCode == 'ZB'
                  ? '招标'
                  : item.witnessLinkCode == 'TB'
                  ? '投标'
                  : item.witnessLinkCode == 'KB'
                  ? '开标'
                  : item.witnessLinkCode == 'PB'
                  ? '评标'
                  : item.witnessLinkCode == 'DB'
                  ? '定标'
                  : ''
              "
              :name="item.witnessLinkCode"
            />
          </el-tabs> -->
          <!-- {{ attachmentList }} -->
          <el-tabs v-model="topTaskActive" @tab-click="stepsClickFn">
            <el-tab-pane
              v-for="(item, index) in attachmentList"
              :key="index"
              :label="item.witnessSubTaskName"
              :name="item.witnessSubTaskName"
            />
          </el-tabs>
        </div>
        <div class="layout-body">
          <el-table
            :ref="'subTask'"
            height="100%"
            style="width: 100%"
            :data="tableList"
            :no-hover="true"
            :isdrag="true"
          >
            <el-table-column type="index" :index="indexFn" align="center" label="序号" width="50">
              <template slot-scope="scope">
                {{ (pageObj.currentPage - 1) * pageObj.pageSize + scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column prop="itemName" label="事项说明" min-width="160" />
            <el-table-column prop="attachmentName" label="附件名称" min-width="180">
              <template slot-scope="scope" row-click>
                <el-button type="text" size="default" @click="handleAttachView(scope)">
                  {{ scope.row.attachmentName }}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="attachmentType" label="附件类型" min-width="150" />
            <el-table-column prop="createTime" label="接收时间" min-width="140">
              <template slot-scope="scope">
                {{ momentFn(scope.row.createTime).format("yyyy-MM-DD HH:mm") }}
              </template>
            </el-table-column>
            <el-table-column label="来源" min-width="100">
              <template slot-scope="scope">
                {{ scope.row.isSystem === "NO" ? scope.row.source : scope.row.sysName }}
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="110">
              <template slot-scope="scope">
                <el-button type="text" size="default" @click="downloadAttachFn(scope)">下载</el-button>
                <!-- <a :download="downloadAttachFn(scope)" :href="downloadAttachFn(scope)" target="_blank">下载</a> -->
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div v-else class="box">
        <div style="width: 100%">
          <el-table
            :ref="'subTask'"
            style="width: 100%"
            height="100%"
            :data="tableList"
            :no-hover="true"
            :isdrag="true"
          >
            <el-table-column type="index" :index="indexFn" align="center" label="序号" width="50">
              <template slot-scope="scope">
                {{ (pageObj.currentPage - 1) * pageObj.pageSize + scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column v-if="managerFlag" prop="witnessLinkCode" label="见证阶段" min-width="80">
              <template slot-scope="scope">
                {{ scope.row.witnessSubTaskName }}
                <!-- {{ witnessLinkCodeFn(scope.row.witnessLinkCode) }} -->
              </template>
            </el-table-column>
            <el-table-column prop="itemName" label="事项说明" min-width="160" />
            <el-table-column prop="attachmentName" label="附件名称" min-width="180">
              <template slot-scope="scope" row-click>
                <el-button type="text" size="default" @click="handleAttachView(scope)">
                  {{ scope.row.attachmentName }}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="attachmentType" label="附件类型" min-width="100" />
            <el-table-column prop="createTime" label="接收时间" min-width="140">
              <template slot-scope="scope">
                {{ momentFn(scope.row.createTime).format("yyyy-MM-DD HH:mm") }}
              </template>
            </el-table-column>
            <el-table-column label="来源" min-width="100">
              <template slot-scope="scope">
                {{ scope.row.isSystem === "NO" ? scope.row.source : scope.row.sysName }}
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="110">
              <template slot-scope="scope">
                <el-button type="text" size="default" @click="downloadAttachFn(scope)">下载</el-button>
                <!-- <a :download="downloadAttachFn(scope)" :href="downloadAttachFn(scope)" target="_blank">下载</a> -->
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 分页 -->
      <div class="layout-footer ui-pt20">
        <!-- {{ pageObj.total + " " + pageObj.pageSize }} -->
        <pagination
          v-if="pageObj.total > pageObj.pageSizes[0]"
          :total="pageObj.total"
          :page.sync="pageObj.currentPage"
          :limit.sync="pageObj.pageSize"
          :page-sizes="pageObj.pageSizes"
          @pagination="getAttachmentListFn"
        />
      </div>
    </div>
  </div>
</template>
<script>
  import { getAttachmentList, moduleInit } from "../../api/api";
  import { FindArrayFn } from "../../utils/utils";
  // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  export default {
    // 引入组件
    components: {},
    props: {},
    data() {
      // 这里存放数据
      return {
        breadPathList: [],
        topTaskActive: "",
        attachmentList: [],
        bidSectionId: "",
        tableList: [],
        pageObj: {
          total: 0,
          currentPage: 1,
          pageSize: 10,
          pageSizes: [10, 20, 30]
        },
        TASKOBJ: {}
      };
    },
    // 监听属性 类似于data概念
    computed: {
      managerFlag() {
        return this.$store.getters.roleCode === "GDW_R_WITNESS_MANAGER";
      }
    },
    // 监控data中的数据变化
    watch: {},
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
      if (this.$route.query.from === "attachment") {
        this.attachmentList = JSON.parse(this.$route.query.attachmentList);
        this.findActiveTabFn(this.$route.query.witnessSubTaskName);
      }
      if (this.$route.query.from === "witnessTaskView") {
        this.breadPathList.push({
          path: "/WitnessTaskManagement/WitnessTaskView",
          title: "见证任务管理"
        });
      }
      if (this.$route.query.from === "attachment") {
        this.breadPathList.push({
          path: "/WitnessTask/HaveWitnessed",
          title: "已完成"
        });
      }
      this.getAttachmentListFn();
      this.moduleInitFn();
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      if (this.attachmentList.length === 1) {
        document.getElementsByClassName("el-tabs__active-bar")[0].className += " tab-container";
      }
    },
    // 生命周期 - 销毁之前
    beforeDestroy() {},
    // 生命周期 - 销毁完成
    destroyed() {},
    // 如果页面有keep-alive缓存功能，这个函数会触发
    activated() {},
    // 方法集合
    methods: {
      momentFn(date) {
        return this.$moment(date);
      },
      async moduleInitFn() {
        const p = { moduleName: "TASK" };
        try {
          const res = await moduleInit(p);
          if (res.success) {
            this.TASKOBJ = res.data;
          } else {
            this.$message({
              type: "error",
              message: res.message || "获取数据失败，请稍后再试",
              single: true
            });
          }
        } catch (err) {
          console.error(err);
          this.$message({
            type: "error",
            message: "获取数据失败，请稍后再试",
            single: true
          });
        }
      },
      findActiveTabFn(witnessSubTaskName) {
        console.log("witnessSubTaskName", witnessSubTaskName);
        for (const item of this.attachmentList) {
          if (item.witnessSubTaskName === witnessSubTaskName) {
            console.log("itemtab", item);
            this.bidSectionId = item.bidSectionId;
            this.witnessSubTaskId = item.witnessSubTaskId;
            this.topTaskActive = item.witnessSubTaskName;
            // this.topTaskActive = item.witnessLinkCode;
            return;
          }
        }
      },
      async getAttachmentListFn() {
        try {
          const data = {
            currentPage: this.pageObj.currentPage,
            pageSize: this.pageObj.pageSize
          };
          if (this.$route.query.from === "witnessTaskView") {
            data["witnessTaskId"] = this.$route.query.witnessTaskId;
          } else {
            data["bidSectionId"] = this.bidSectionId;
            data["witnessSubTaskId"] = this.witnessSubTaskId;
            for (const item of this.attachmentList) {
              if (this.topTaskActive === item.witnessSubTaskName) {
                data["witnessLinkCode"] = item.witnessLinkCode;
              }
            }
            // data["witnessLinkCode"] = this.topTaskActive;
          }
          console.log("data", data);
          const res = await getAttachmentList(data);
          this.tableList = res.data ? res.data.data : res.data;
          this.pageObj.total = res.data ? res.data.pageBean.count : 0;
        } catch (err) {
          console.error(err);
          this.$message({
            type: "error",
            message: "获取数据失败，请稍后再试",
            single: true
          });
        }
      },
      downloadAttachFn(scope) {
        const downloadUrl =
          scope.row.isSystem === "NO"
            ? `${process.env.VUE_APP_API}/platform/attach/download?attachId=${scope.row.attachmentPlatformId}`
            : scope.row.attachmentUrl;
        // let name = scope.row.attachmentName;
        const downloadRes = async () => {
          const response = await fetch(downloadUrl); // 内容转变成blob地址
          const blob = await response.blob(); // 创建隐藏的可下载链接
          const objectUrl = window.URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.href = objectUrl;
          a.download = `${scope.row.attachmentName}.${scope.row.attachmentType}`;
          a.click();
          a.remove();
        };
        downloadRes();
      },
      handleAttachView(scope) {
        if (scope.row.isSystem === "NO") {
          this.downloadAttachFn(scope);
        } else {
          window.open(scope.row.attachmentUrl);
        }
      },
      stepsClickFn(tab) {
        if (tab) {
          this.findActiveTabFn(this.topTaskActive);
        }
        this.pageObj.currentPage = 1;
        this.pageObj.pageSize = 10;
        this.getAttachmentListFn();
      },
      indexFn(index) {
        return index + 1 + (this.pageObj.currentPage - 1) * this.pageObj.pageSize;
      },
      handleBack() {
        if (this.$route.query.from === "attachment") {
          this.$router.push({
            path: "/WitnessTask/HaveWitnessed"
          });
        }
        if (this.$route.query.from === "witnessTaskView") {
          this.$router.push({
            path: "/WitnessTaskManagement/WitnessTaskView"
          });
        }
      },
      witnessLinkCodeFn(val) {
        const array = this.TASKOBJ.taskWitnessLink;
        const obj = FindArrayFn(array, val) || {};
        return obj.label;
      }
    }
  };
</script>
<style lang="scss" scoped>
  .witness-main {
    padding: 10px;
    ::v-deep .tab-container {
      transform: inherit !important;
    }
  }
  .k-header-box {
    .el-tabs__content {
      height: 4px;
      font-size: 1px;
    }
  }
  .layout-search {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0px 10px 10px 0;
    background-color: #eeeeee !important;
    // display: none;
  }
  .daishenhe-tag {
    display: inline-block;
    position: relative;
    top: -30px;
    left: 720px;
    margin-right: 10px;
    margin-right: 10px;
    i {
      font-size: 70px;
      color: $primary;
    }
  }
  .btn_top {
    color: #fff;
    border-radius: 4px;
    display: inline-block;
    padding: 0px 20px;
    background-color: #eee;
    border: 1px solid rgb(0, 140, 255);
  }
  .box_one {
    line-height: 0;
    padding: 10px;
    border-top: 1px solid #ededed;
    background-color: #fff;
  }
  .box_top {
    padding: 0 10px;
  }
  .box_border {
    font-weight: bold;
    padding-left: 5px;
    margin-top: 10px;
    border-left: 2px solid rgb(0, 140, 255);
  }
  .box_three {
    padding-left: 5px;
  }
  i {
    position: relative;
    top: 3px;
    right: 7px;
    font-size: 22px;
    color: rgb(0, 140, 255);
    // border: 1px solid #fff;
  }
  .infinite-list {
    padding: 15px;
    padding-right: 25%;
    padding-left: 25%;
    height: 620px;
  }
  .footer_btn {
    text-align: right;
    margin-right: 10px;
  }
  ::v-deep .el-steps--simple .el-step .el-step__title {
    line-height: 20px !important;
    color: #1890ff !important;
  }
  ::v-deep .el-steps--simple .el-step.is-step-process .el-step__title {
    color: #fff !important;
  }
  ::v-deep .el-steps--simple .el-step {
    background: #e8f4ff !important;
    cursor: pointer !important;
  }
  ::v-deep .el-steps--simple .el-step.is-step-process {
    background: #1890ff !important;
  }
  ::v-deep .el-steps--simple .el-step.is-step-process:after {
    line-height: 20px !important;
    border: 10px solid transparent;
    border-left: 12px solid #1890ff !important;
    right: -22px !important;
  }
  ::v-deep .el-steps--simple .el-step {
    height: 20px !important;
  }
  ::v-deep .el-checkbox__inner {
    border-radius: 10px !important;
  }
  ::v-deep .el-steps--simple .el-step:after {
    right: -22px !important;
    border: 10px solid transparent;
    border-left: 12px solid #e8f4ff !important;
  }
  ::v-deep .el-steps--simple .el-step:before {
    border: 10px solid transparent !important;
    border-left: 10px solid #fff !important;
  }
  ::v-deep .el-steps--simple:not(.is-average) {
    top: 4px !important;
  }
  ::v-deep .el-checkbox {
    // 选框
    .el-checkbox__inner {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      // 中间的 “✔” 的位置调整
      &::after {
        width: 3px;
        height: 3px;
        left: 4px;
        border-radius: 10px;
        background: #1890ff;
        border-left: none;
        border-top: none;
        top: 4px;
      }
    }
  }
  ::v-deep .is-last {
    clear: both !important;
  }
  .ul_box {
    border: 1px solid #ededed;
    padding: 10px;
  }
  .box {
    height: 100%;
    background: #ffffff;
    .layout-body {
      height: calc(100% - 53px);
    }
  }
  .box_tow {
    // height: 100%;
    background-color: #fff;
  }
  h1 {
    font-size: 20px;
    font-weight: bold;
  }
  .table_BT {
    margin-top: 10px;
    width: 100%;
    height: 40px;
    background-color: #1890ff;
  }
  .table_BT_witness {
    margin-top: 10px;
    width: 100%;
    background-color: #1890ff;
  }
  .table_BT_left {
    padding-left: 10px;
    width: 48%;
    color: #fff;
    display: inline-block;
    line-height: 40px;
  }
  .table_BT_right {
    padding-left: 10px;
    width: 49%;
    color: #fff;
    display: inline-block;
    line-height: 40px;
  }
  .table_BT_right1 {
    width: 50%;
    color: #fff;
    display: inline-block;
    line-height: 40px;
  }
  .table_BT_right2 {
    width: 50%;
    color: #fff;
    display: inline-block;
    line-height: 40px;
  }
  .YC_iocn {
    color: red;
    font-weight: bold;
  }
  .YC_iocns {
    color: #333;
  }
  .YC_iocnss {
    color: #fff;
  }
  .SH_text {
    font-size: 12px;
    margin-left: 10px;
  }
  .table_BT_SH {
    width: 100%;
    background-color: #1890ff;
  }
  .table_BT_SHs {
    width: 100%;
    margin-top: 10px;
    background-color: #6486c6;
  }
  .SH_box {
    width: 96%;
    padding: 0 20px;
  }
  .daishenhe-tag .icon-yishenhe1 {
    color: #57b21c;
  }
  .box_tow .infinite-list h1 {
    text-align: center;
    margin-bottom: 20px;
  }
  .biaoTi {
    height: 30px;
    line-height: 30px;
  }
  .biaoTi span {
    font-size: 14px;
    font-weight: bold;
  }
  .radio_SH {
    position: relative;
    bottom: 0px;
    right: 20px;
  }
</style>
